<template>
	<view>
		<view style="padding: 0 10px;">
			<h4>新会议</h4>

			<u-grid :border="false" style="margin-top: 20px;">
				<u-grid-item @click="modelShow = true">
					<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="60px" height="60px" shape="circle">
					</u-image>
					<text class="grid-text">视频会议</text>
				</u-grid-item>
				<u-grid-item @click="modelShow = true">
					<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="60px" height="60px" shape="circle">
					</u-image>
					<text class="grid-text">语音会议</text>
				</u-grid-item>
				<u-grid-item @click="modelShow = true">
					<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="60px" height="60px" shape="circle">
					</u-image>
					<text class="grid-text">视频课堂</text>
				</u-grid-item>
			</u-grid>

			<u-cell-group style="margin-top: 30px;">
				<u-cell size="large" title="周五例会" label="9:00" @click="goBack"></u-cell>
				<u-cell size="large" title="月末总结会" label="2022/9/30 18:00" @click="goBack"></u-cell>
				<u-cell size="large" title="需求商讨会议" label="2022/9/30 10:00" @click="goBack"></u-cell>
			</u-cell-group>
		</view>

		<u-modal :show="modelShow" :showCancelButton="true" title="加入会议" @cancel="modelShow = false">
			<view class="slot-content">
				<u-input placeholder="请输入会议ID"></u-input>
			</view>
		</u-modal>

		<view class="more" :class="{ more2: isShow, more3: !isShow }">
			<navigator class="more-item" url="../msg/setupGroup/setupGroup">
				<!-- <view class="more-item"> -->
				<u-icon class="i" name="chat-fill" color="#fff" size="28"></u-icon>
				<text>创建群聊</text>
				<!-- </view> -->
			</navigator>
			<u-line></u-line>
			<navigator class="more-item" url="../msg/addFriend/addFriend">
				<u-icon class="i" name="man-add-fill" color="#fff" size="28"></u-icon>
				<text>添加好友</text>
			</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShow: false,
			modelShow: false,
		}
	},
	onShow() {
		uni.setTabBarItem({
			index: 0,
			text: this.$t('tabbar.msg')
		})
		uni.setTabBarItem({
			index: 1,
			text: this.$t('tabbar.contact')
		})
		uni.setTabBarItem({
			index: 2,
			text: this.$t('tabbar.meeting')
		})
		uni.setTabBarItem({
			index: 3,
			text: this.$t('tabbar.my')
		})
	},
	methods: {
		onNavigationBarButtonTap(e) {
			// console.log(e)
			this.isShow = !this.isShow
		},
		goBack() {
			uni.navigateTo({
				url: './detail/index',
				animationType: 'pop-in',
				animationDuration: 300
			})
		}
	}
}
</script>

<style lang="scss">
.more {
	// width: 240rpx;
	width: 120px;
	background-color: rgb(77, 77, 77);
	position: fixed;
	border-radius: 10px;
	// top: 0px;
	/* #ifdef APP-PLUS */
	top: 0px;
	/* #endif */
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	right: 5px;
	z-index: 99;

	.more-item {
		padding: 20rpx;

		.i {
			display: inline-block;
		}

		text {
			float: right;
			margin-top: 5rpx;
			color: #fff;
		}
	}
}

.more2 {
	transition-duration: 0.5s;
	transform: translateY(0px);
}

.more3 {
	transition-duration: 0.5s;
	transform: translateY(-500px);
}
</style>
